<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.60">
    <script>
      (function() {
        const userMode = localStorage.getItem('vuepress-reco-color-scheme') || 'auto';
        const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

        if (userMode === 'dark' || (userMode === 'auto' && systemDarkMode)) {
          document.documentElement.classList.toggle('dark', true);
        }
      })();
    </script>
    <link rel="icon" href="/logo.png"><title>H5+css3基础 | 王茂铭</title><meta name="description" content="Just playing around">
    <link rel="modulepreload" href="/wb/assets/app-32a7af8e.js"><link rel="modulepreload" href="/wb/assets/framework-c27b6911.js"><link rel="modulepreload" href="/wb/assets/092101.html-40dbcdf2.js"><link rel="modulepreload" href="/wb/assets/092101.html-1890511d.js"><link rel="prefetch" href="/wb/assets/index.html-6d5e9dd3.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-8e728de0.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-71f98eb6.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-47172bd3.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c4d32c30.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-75e9cb1a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-a2c706b5.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-17c6444b.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-6958f27b.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-d981608d.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-ff4c5386.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-97c1c024.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-8596a00c.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-2434c570.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-0b4e72f2.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-70379254.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-bcce1cd3.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-e1575d57.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c08582eb.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-4df8ef63.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-fa97dbe9.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-ea3cbcd8.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-5d7f901a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-ec6cc437.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-8802c78f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c5b96a91.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-55c1ed81.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f36d8351.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-da9b2394.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-5ac52d4f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-27e68ae7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-1834aef1.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-d4810458.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-560c14b4.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-35b38f45.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-93b00c29.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f42fa99c.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c7a62b28.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-7f3eeb92.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c8596e07.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f6681850.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-2773f5fc.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-6cf06f14.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-1a88d37b.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c8e98ed0.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-800887e5.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-06f5ab5e.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-db4c3376.js" as="script"><link rel="prefetch" href="/wb/assets/031101.html-02798306.js" as="script"><link rel="prefetch" href="/wb/assets/031102.html-15b3adb4.js" as="script"><link rel="prefetch" href="/wb/assets/031501.html-3134e3b4.js" as="script"><link rel="prefetch" href="/wb/assets/122102.html-ceeb362a.js" as="script"><link rel="prefetch" href="/wb/assets/010601.html-3fe2b350.js" as="script"><link rel="prefetch" href="/wb/assets/010602.html-d33aafe0.js" as="script"><link rel="prefetch" href="/wb/assets/010603.html-731c8a98.js" as="script"><link rel="prefetch" href="/wb/assets/010604.html-6bc8d643.js" as="script"><link rel="prefetch" href="/wb/assets/010701.html-12966c2a.js" as="script"><link rel="prefetch" href="/wb/assets/010801.html-0fca227d.js" as="script"><link rel="prefetch" href="/wb/assets/011001.html-d10dc4a2.js" as="script"><link rel="prefetch" href="/wb/assets/011201.html-bbd7d0bc.js" as="script"><link rel="prefetch" href="/wb/assets/011202.html-f1b9f476.js" as="script"><link rel="prefetch" href="/wb/assets/011301.html-f7ba82d3.js" as="script"><link rel="prefetch" href="/wb/assets/011501.html-9196b987.js" as="script"><link rel="prefetch" href="/wb/assets/010501.html-43e0fee1.js" as="script"><link rel="prefetch" href="/wb/assets/031801.html-0a02ab60.js" as="script"><link rel="prefetch" href="/wb/assets/092102.html-74b61e87.js" as="script"><link rel="prefetch" href="/wb/assets/092103.html-2c9d1221.js" as="script"><link rel="prefetch" href="/wb/assets/081101.html-86de4307.js" as="script"><link rel="prefetch" href="/wb/assets/092001.html-20d934d3.js" as="script"><link rel="prefetch" href="/wb/assets/092102.html-ae3f31b4.js" as="script"><link rel="prefetch" href="/wb/assets/092103.html-74cff86b.js" as="script"><link rel="prefetch" href="/wb/assets/092104.html-004f7a47.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-3f3fe144.js" as="script"><link rel="prefetch" href="/wb/assets/122101.html-f85b1d72.js" as="script"><link rel="prefetch" href="/wb/assets/122201.html-572b8a97.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-b6d3d031.js" as="script"><link rel="prefetch" href="/wb/assets/092106.html-709c9d31.js" as="script"><link rel="prefetch" href="/wb/assets/121501.html-6bc29a5d.js" as="script"><link rel="prefetch" href="/wb/assets/092101.html-f5635806.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-054223dd.js" as="script"><link rel="prefetch" href="/wb/assets/guide.html-561bbc0f.js" as="script"><link rel="prefetch" href="/wb/assets/011301.html-a89f05e1.js" as="script"><link rel="prefetch" href="/wb/assets/021401.html-b25135ac.js" as="script"><link rel="prefetch" href="/wb/assets/022001.html-3fd7ebe7.js" as="script"><link rel="prefetch" href="/wb/assets/022101.html-f6317717.js" as="script"><link rel="prefetch" href="/wb/assets/030801.html-cbbde2a3.js" as="script"><link rel="prefetch" href="/wb/assets/032201.html-33e3ac66.js" as="script"><link rel="prefetch" href="/wb/assets/022201.html-963afee1.js" as="script"><link rel="prefetch" href="/wb/assets/030501.html-84913c94.js" as="script"><link rel="prefetch" href="/wb/assets/home.html-3eb4d994.js" as="script"><link rel="prefetch" href="/wb/assets/plugin.html-1483d1d0.js" as="script"><link rel="prefetch" href="/wb/assets/standard.html-14b52c51.js" as="script"><link rel="prefetch" href="/wb/assets/vuePackage.html-0219c43d.js" as="script"><link rel="prefetch" href="/wb/assets/404.html-60b35caa.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-cc91309e.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-605912bc.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-beb31cc7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-b61a46e1.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f98e8ff2.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-fa9fcc1d.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-073d6df6.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c3fee9e4.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-52c1909f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-def60933.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-76d7399e.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-cc87ab1a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-49a24dd3.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f6c26c3a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-4a7242ff.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-b00d5359.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-e2ee4194.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-e4115364.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-4521aa3a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c4b820ea.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-6fdefc04.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-50818995.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-2014b8cd.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-b1dc5ed7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-2ddb2e51.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-72fa249f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-217d2183.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-0b40087e.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c52474d7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-8489252c.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-2407d7b8.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-daf2f840.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-db0ba367.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-0999e780.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-ff3616e1.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-40ca6f0a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-ba22b693.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f989ee07.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-d7d4cc9f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-6ee6582b.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-955dcc0f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-5feeb1e7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-a5819ddb.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-a45e3ca9.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-452ace3c.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-46c84a4f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-b428ebd7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-8380941b.js" as="script"><link rel="prefetch" href="/wb/assets/031101.html-b6a75232.js" as="script"><link rel="prefetch" href="/wb/assets/031102.html-7868935d.js" as="script"><link rel="prefetch" href="/wb/assets/031501.html-a7e44746.js" as="script"><link rel="prefetch" href="/wb/assets/122102.html-6865b75f.js" as="script"><link rel="prefetch" href="/wb/assets/010601.html-dad7a79c.js" as="script"><link rel="prefetch" href="/wb/assets/010602.html-7fb1cd64.js" as="script"><link rel="prefetch" href="/wb/assets/010603.html-e563daab.js" as="script"><link rel="prefetch" href="/wb/assets/010604.html-815b9c8a.js" as="script"><link rel="prefetch" href="/wb/assets/010701.html-2b4e145e.js" as="script"><link rel="prefetch" href="/wb/assets/010801.html-b73655fc.js" as="script"><link rel="prefetch" href="/wb/assets/011001.html-2b9771e1.js" as="script"><link rel="prefetch" href="/wb/assets/011201.html-1af6d9d4.js" as="script"><link rel="prefetch" href="/wb/assets/011202.html-9093c19a.js" as="script"><link rel="prefetch" href="/wb/assets/011301.html-a03518e6.js" as="script"><link rel="prefetch" href="/wb/assets/011501.html-e90b5831.js" as="script"><link rel="prefetch" href="/wb/assets/010501.html-2ebe48c4.js" as="script"><link rel="prefetch" href="/wb/assets/031801.html-e190b745.js" as="script"><link rel="prefetch" href="/wb/assets/092102.html-047558e2.js" as="script"><link rel="prefetch" href="/wb/assets/092103.html-3f4ca6b9.js" as="script"><link rel="prefetch" href="/wb/assets/081101.html-c0375214.js" as="script"><link rel="prefetch" href="/wb/assets/092001.html-b2f5f9d7.js" as="script"><link rel="prefetch" href="/wb/assets/092102.html-111fa3dd.js" as="script"><link rel="prefetch" href="/wb/assets/092103.html-dfe62a63.js" as="script"><link rel="prefetch" href="/wb/assets/092104.html-6ea8f578.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-f58f55b7.js" as="script"><link rel="prefetch" href="/wb/assets/122101.html-a20220c8.js" as="script"><link rel="prefetch" href="/wb/assets/122201.html-7699eb69.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-ea49cb27.js" as="script"><link rel="prefetch" href="/wb/assets/092106.html-6d252224.js" as="script"><link rel="prefetch" href="/wb/assets/121501.html-4c68ef56.js" as="script"><link rel="prefetch" href="/wb/assets/092101.html-01673776.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-49fde8c8.js" as="script"><link rel="prefetch" href="/wb/assets/guide.html-85aeb00d.js" as="script"><link rel="prefetch" href="/wb/assets/011301.html-869da26f.js" as="script"><link rel="prefetch" href="/wb/assets/021401.html-ecbb30c7.js" as="script"><link rel="prefetch" href="/wb/assets/022001.html-f65da4af.js" as="script"><link rel="prefetch" href="/wb/assets/022101.html-bf352765.js" as="script"><link rel="prefetch" href="/wb/assets/030801.html-c3885c66.js" as="script"><link rel="prefetch" href="/wb/assets/032201.html-86eb91fa.js" as="script"><link rel="prefetch" href="/wb/assets/022201.html-998fc43b.js" as="script"><link rel="prefetch" href="/wb/assets/030501.html-61615073.js" as="script"><link rel="prefetch" href="/wb/assets/home.html-5d4ac598.js" as="script"><link rel="prefetch" href="/wb/assets/plugin.html-85fb2e2c.js" as="script"><link rel="prefetch" href="/wb/assets/standard.html-52035280.js" as="script"><link rel="prefetch" href="/wb/assets/vuePackage.html-6cc12cdb.js" as="script"><link rel="prefetch" href="/wb/assets/404.html-16732b58.js" as="script"><link rel="prefetch" href="/wb/assets/reco-valine-a0c1af1f.js" as="script">
    <link rel="preload" href="/wb/assets/style-cad7fe2b.css" as="style"><link rel="stylesheet" href="/wb/assets/style-cad7fe2b.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><div class="common-wrapper series--no show-catalog"><div><header class="navbar-container"><!--[--><div class="site-brand nav-item"><img class="logo" src="/wb/logo.png" alt="王茂铭"><a href="/wb/" class="site-name can-hide">王茂铭</a></div><div class="nav-item navbar-links-wrapper" style=""><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form><nav class="navbar-links"><!--[--><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="Categories"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Categories<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="Categories"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Categories<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/categories/shujujiegouyusuanfa/1/" class="link" aria-label="数据结构与算法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->数据结构与算法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/weiqianduanjiagou/1/" class="link" aria-label="微前端架构"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->微前端架构<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/mianshi/1/" class="link" aria-label="面试"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->面试<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/React/1/" class="link" aria-label="React"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->React<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/qianduan/1/" class="link" aria-label="前端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/vue/1/" class="link" aria-label="vue"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/Angular/1/" class="link" aria-label="Angular"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Angular<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/WebGIS/1/" class="link" aria-label="WebGIS"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->WebGIS<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/gongjuyuyuedu/1/" class="link" aria-label="工具与阅读"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->工具与阅读<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/houduan/1/" class="link" aria-label="后端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->后端<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="Tags"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Tags<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="Tags"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Tags<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/tags/shujujiegouyusuanfa/1/" class="link" aria-label="数据结构与算法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->数据结构与算法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/weiqianduanjiagou/1/" class="link" aria-label="微前端架构"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->微前端架构<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/qiankun/1/" class="link" aria-label="qiankun"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->qiankun<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/mianshi/1/" class="link" aria-label="面试"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->面试<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/react/1/" class="link" aria-label="react"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->react<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/element/1/" class="link" aria-label="element"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->element<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/tree/1/" class="link" aria-label="tree"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->tree<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/js/1/" class="link" aria-label="js"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->js<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/daimajiqiao/1/" class="link" aria-label="代码技巧"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->代码技巧<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/vue/1/" class="link" aria-label="vue"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/diceng/1/" class="link" aria-label="底层"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->底层<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/angular/1/" class="link" aria-label="angular"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->angular<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/echars/1/" class="link" aria-label="echars"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->echars<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/keshihua/1/" class="link" aria-label="可视化"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->可视化<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/gaodeditu/1/" class="link" aria-label="高德地图"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->高德地图<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/shouce/1/" class="link" aria-label="手册"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->手册<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/es6/1/" class="link" aria-label="es6"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->es6<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/qianduan/1/" class="link" aria-label="前端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/jianrongxing/1/" class="link" aria-label="兼容性"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->兼容性<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/node/1/" class="link" aria-label="node"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->node<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/html/1/" class="link" aria-label="html"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->html<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/css/1/" class="link" aria-label="css"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->css<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/python/1/" class="link" aria-label="python"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->python<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/flask/1/" class="link" aria-label="flask"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->flask<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/Objective-C/1/" class="link" aria-label="Objective-C"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Objective-C<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/webpack/1/" class="link" aria-label="webpack"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->webpack<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/git/1/" class="link" aria-label="git"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->git<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/shuji/1/" class="link" aria-label="书籍"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->书籍<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/aihao/1/" class="link" aria-label="爱好"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->爱好<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links__item"><a href="/wb/" class="link router-link-active" aria-label="首页"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->首页<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="文档"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->文档<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="文档"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->文档<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/home" class="link" aria-label="公共方法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->公共方法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/vuePackage" class="link" aria-label="vue组件包"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue组件包<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/standard" class="link" aria-label="前端代码规范"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端代码规范<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><!--]--></nav><span class="xicon-container btn-toggle-dark-mode btn--dark-mode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></span><span class="xicon-container btn-toggle-menus"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><circle cx="16" cy="8" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="24" r="2" fill="currentColor"></circle></svg></span></div><!--]--></header><div class="mobile-menus-container"><nav class="navbar-links mobile"><!--[--><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="Categories"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Categories<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="Categories"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Categories<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/categories/shujujiegouyusuanfa/1/" class="link" aria-label="数据结构与算法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->数据结构与算法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/weiqianduanjiagou/1/" class="link" aria-label="微前端架构"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->微前端架构<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/mianshi/1/" class="link" aria-label="面试"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->面试<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/React/1/" class="link" aria-label="React"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->React<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/qianduan/1/" class="link" aria-label="前端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/vue/1/" class="link" aria-label="vue"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/Angular/1/" class="link" aria-label="Angular"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Angular<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/WebGIS/1/" class="link" aria-label="WebGIS"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->WebGIS<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/gongjuyuyuedu/1/" class="link" aria-label="工具与阅读"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->工具与阅读<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/houduan/1/" class="link" aria-label="后端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->后端<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="Tags"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Tags<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="Tags"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Tags<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/tags/shujujiegouyusuanfa/1/" class="link" aria-label="数据结构与算法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->数据结构与算法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/weiqianduanjiagou/1/" class="link" aria-label="微前端架构"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->微前端架构<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/qiankun/1/" class="link" aria-label="qiankun"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->qiankun<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/mianshi/1/" class="link" aria-label="面试"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->面试<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/react/1/" class="link" aria-label="react"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->react<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/element/1/" class="link" aria-label="element"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->element<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/tree/1/" class="link" aria-label="tree"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->tree<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/js/1/" class="link" aria-label="js"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->js<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/daimajiqiao/1/" class="link" aria-label="代码技巧"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->代码技巧<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/vue/1/" class="link" aria-label="vue"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/diceng/1/" class="link" aria-label="底层"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->底层<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/angular/1/" class="link" aria-label="angular"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->angular<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/echars/1/" class="link" aria-label="echars"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->echars<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/keshihua/1/" class="link" aria-label="可视化"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->可视化<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/gaodeditu/1/" class="link" aria-label="高德地图"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->高德地图<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/shouce/1/" class="link" aria-label="手册"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->手册<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/es6/1/" class="link" aria-label="es6"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->es6<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/qianduan/1/" class="link" aria-label="前端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/jianrongxing/1/" class="link" aria-label="兼容性"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->兼容性<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/node/1/" class="link" aria-label="node"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->node<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/html/1/" class="link" aria-label="html"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->html<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/css/1/" class="link" aria-label="css"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->css<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/python/1/" class="link" aria-label="python"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->python<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/flask/1/" class="link" aria-label="flask"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->flask<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/Objective-C/1/" class="link" aria-label="Objective-C"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Objective-C<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/webpack/1/" class="link" aria-label="webpack"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->webpack<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/git/1/" class="link" aria-label="git"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->git<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/shuji/1/" class="link" aria-label="书籍"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->书籍<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/aihao/1/" class="link" aria-label="爱好"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->爱好<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links__item"><a href="/wb/" class="link router-link-active" aria-label="首页"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->首页<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="文档"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->文档<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="文档"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->文档<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/home" class="link" aria-label="公共方法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->公共方法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/vuePackage" class="link" aria-label="vue组件包"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue组件包<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/standard" class="link" aria-label="前端代码规范"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端代码规范<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><!--]--></nav><div class="appearance"><span>Appearance</span><span class="xicon-container btn-toggle-dark-mode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></span></div></div><div class="series-mask"></div><aside class="series-container"><div class="site-brand"><img class="logo" src="/wb/logo.png" alt="王茂铭"><a href="/wb/" class="site-name can-hide">王茂铭</a></div><!--[--><!--]--></aside><!--[--><main class="page-container"><h1 class="page-title">H5+css3基础</h1><div class="page-info"><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M16 4a5 5 0 1 1-5 5a5 5 0 0 1 5-5m0-2a7 7 0 1 0 7 7a7 7 0 0 0-7-7z" fill="currentColor"></path><path d="M26 30h-2v-5a5 5 0 0 0-5-5h-6a5 5 0 0 0-5 5v5H6v-5a7 7 0 0 1 7-7h6a7 7 0 0 1 7 7z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->王茂铭<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2019-12-21<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M11.17 6l3.42 3.41l.58.59H28v16H4V6h7.17m0-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H16l-3.41-3.41A2 2 0 0 0 11.17 4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M10 14a4 4 0 1 1 4-4a4.005 4.005 0 0 1-4 4zm0-6a2 2 0 1 0 1.998 2.004A2.002 2.002 0 0 0 10 8z" fill="currentColor"></path><path d="M16.644 29.415L2.586 15.354A2 2 0 0 1 2 13.941V4a2 2 0 0 1 2-2h9.941a2 2 0 0 1 1.414.586l14.06 14.058a2 2 0 0 1 0 2.828l-9.943 9.943a2 2 0 0 1-2.829 0zM4 4v9.942L18.058 28L28 18.058L13.942 4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->html css<!--]--></span></span><!----></div><div class="theme-reco-default-content"><div><h2 id="h5-css3" tabindex="-1"><a class="header-anchor" href="#h5-css3" aria-hidden="true">#</a> H5+css3</h2><h3 id="html5和html的区别" tabindex="-1"><a class="header-anchor" href="#html5和html的区别" aria-hidden="true">#</a> html5和html的区别</h3><ol><li>html5新增了语义化标签：footer 、nav、section…</li><li>html5完全支持css3</li><li>支持本地离线存储</li><li>新增了canvas标签</li><li>新增视频和音频标签 HTML5离线存储</li></ol><p>localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 数据在浏览器关闭后自动删除。</p><h3 id="对语义化标签的理解" tabindex="-1"><a class="header-anchor" href="#对语义化标签的理解" aria-hidden="true">#</a> 对语义化标签的理解</h3><ol><li><p>去掉或者丢失样式的时候能够让页面呈现出清晰的结构</p></li><li><p>有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；</p></li><li><p>方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；</p></li><li><p>便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。</p></li></ol><h3 id="浏览器的内核" tabindex="-1"><a class="header-anchor" href="#浏览器的内核" aria-hidden="true">#</a> 浏览器的内核</h3><p>IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；</p><p>浏览器内核的理解</p><p>渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。</p><p>JS引擎则：解析和执行javascript来实现网页的动态效果。</p><h3 id="前端页面有哪三层构成-分别是什么-作用是什么" tabindex="-1"><a class="header-anchor" href="#前端页面有哪三层构成-分别是什么-作用是什么" aria-hidden="true">#</a> 前端页面有哪三层构成，分别是什么？作用是什么</h3><ol><li><p>结构层：由 HTML 或 XHTML 之类的标记语言负责创建，仅负责语义的表达。解决了页面“内容是什么”的问题。</p></li><li><p>表示层：由CSS负责创建，解决了页面“如何显示内容”的问题。</p></li><li><p>行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。</p></li></ol><h3 id="doctype作用-严格模式与混杂模式如何区分-它们有何意义" tabindex="-1"><a class="header-anchor" href="#doctype作用-严格模式与混杂模式如何区分-它们有何意义" aria-hidden="true">#</a> Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?</h3><p>声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。 严格模式的排版和 JS 运作模式是，以该浏览器支持的最高标准运行。</p><p>在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。</p><p>DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。</p><h3 id="你知道多少种doctype文档类型" tabindex="-1"><a class="header-anchor" href="#你知道多少种doctype文档类型" aria-hidden="true">#</a> 你知道多少种Doctype文档类型</h3><p>标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。</p><h3 id="html与xhtml——二者有什么区别" tabindex="-1"><a class="header-anchor" href="#html与xhtml——二者有什么区别" aria-hidden="true">#</a> HTML与XHTML——二者有什么区别</h3><ol><li><p>XHTML 元素必须被正确地嵌套。</p></li><li><p>XHTML 元素必须被关闭。</p></li><li><p>标签名必须用小写字母。</p></li><li><p>XHTML 文档必须拥有根元素。</p></li></ol><h3 id="输入完网址按下回车-到看到网页这个过程中发生了什么" tabindex="-1"><a class="header-anchor" href="#输入完网址按下回车-到看到网页这个过程中发生了什么" aria-hidden="true">#</a> 输入完网址按下回车，到看到网页这个过程中发生了什么</h3><ol><li><p>域名解析</p></li><li><p>发起TCP的3次握手</p></li><li><p>建立TCP连接后发起http请求</p></li><li><p>服务器端响应http请求，浏览器得到html代码</p></li><li><p>浏览器解析html代码，并请求html代码中的资源</p></li><li><p>浏览器对页面进行渲染呈现给用户</p></li></ol><h3 id="网站重构的理解" tabindex="-1"><a class="header-anchor" href="#网站重构的理解" aria-hidden="true">#</a> 网站重构的理解</h3><p>重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。</p><ol><li><p>使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)</p></li><li><p>对于移动平台的优化，针对于SEO进行优化</p></li><li><p>减少代码间的耦合，让代码保持弹性</p></li><li><p>压缩或合并JS、CSS、image等前端资源</p></li></ol><h3 id="优化大图-多图-显示-提高用户体验" tabindex="-1"><a class="header-anchor" href="#优化大图-多图-显示-提高用户体验" aria-hidden="true">#</a> 优化大图（多图）显示，提高用户体验</h3><ol><li><p>图片懒加载，滚动到相应位置才加载图片。</p></li><li><p>图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。</p></li><li><p>使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。</p></li><li><p>如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。</p></li></ol><h3 id="iframe的优缺点" tabindex="-1"><a class="header-anchor" href="#iframe的优缺点" aria-hidden="true">#</a> iframe的优缺点</h3><p>优点：</p><ol><li><p>解决加载缓慢的第三方内容如图标和广告等的加载问题</p></li><li><p>iframe无刷新文件上传</p></li><li><p>iframe跨域通信</p></li></ol><p>缺点：</p><ol><li><p>iframe会阻塞主页面的Onload事件</p></li><li><p>无法被一些搜索引擎索引到</p></li><li><p>页面会增加服务器的http请求</p></li><li><p>会产生很多页面，不容易管理。</p></li></ol><h3 id="请阐述table的缺点" tabindex="-1"><a class="header-anchor" href="#请阐述table的缺点" aria-hidden="true">#</a> 请阐述table的缺点</h3><ol><li><p>太深的嵌套，比如table&gt;tr&gt;td&gt;h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。</p></li><li><p>灵活性差，比如要将tr设置border等属性，是不行的，得通过td</p></li><li><p>代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱</p></li><li><p>混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。</p></li><li><p>table需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。</p></li><li><p>不够语义</p></li></ol><h3 id="行内元素和块级元素有哪些" tabindex="-1"><a class="header-anchor" href="#行内元素和块级元素有哪些" aria-hidden="true">#</a> 行内元素和块级元素有哪些</h3><p>行内元素：a b br i span input select strong</p><p>块级元素：div p h1—h6 from ul ol li</p><h3 id="行内元素和块级元素的区别" tabindex="-1"><a class="header-anchor" href="#行内元素和块级元素的区别" aria-hidden="true">#</a> 行内元素和块级元素的区别</h3><p>行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。</p><p>块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。</p><h3 id="清除浮动的方式" tabindex="-1"><a class="header-anchor" href="#清除浮动的方式" aria-hidden="true">#</a> 清除浮动的方式</h3><p>（1）父级div定义height。</p><p>（2）结尾处加空div标签clear:both。</p><p>（3）父级div定义伪类:after和zoom。</p><p>（4）父级div定义overflow:hidden。</p><p>（5）父级div定义overflow:auto。</p><p>（6）父级div也浮动，需要定义宽度。</p><p>（7）父级div定义display:table。</p><p>（8）结尾处加br标签clear:both。</p><h3 id="引入css样式的方式" tabindex="-1"><a class="header-anchor" href="#引入css样式的方式" aria-hidden="true">#</a> 引入css样式的方式</h3><ol><li><p>行内式：直接在style属性中设定css样式</p></li><li><p>嵌入式：写在标签里</p></li><li><p>导入式：</p></li><li><p>链接式：</p></li></ol><h3 id="link和-import有什么区别" tabindex="-1"><a class="header-anchor" href="#link和-import有什么区别" aria-hidden="true">#</a> link和@import有什么区别</h3><p>（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;</p><p>（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;</p><p>（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。</p><h3 id="css的三大特性" tabindex="-1"><a class="header-anchor" href="#css的三大特性" aria-hidden="true">#</a> css的三大特性</h3><ol><li>继承性</li></ol><p>css中可继承的样式：</p><p>Font-size font-family color text-indent</p><p>不可继承的样式：</p><p>border padding margin width height ;</p><ol start="2"><li><p>成叠性</p></li><li><p>优先级</p></li></ol><ul><li>优先级就近原则，同权重情况下样式定义最近者为准;</li><li>载入样式以最后载入的定位为准;</li></ul><p>优先级为: 同权重: 内联样式表（标签内部）&gt; 嵌入样式表（当前文件中）&gt; 外部样式表（外部文件中）。 !important &gt; id &gt; class &gt; tag important 比 内联优先级高</p><h3 id="css的选择符" tabindex="-1"><a class="header-anchor" href="#css的选择符" aria-hidden="true">#</a> css的选择符</h3><ol><li><p>标签选择器</p></li><li><p>ID选择器</p></li><li><p>类选择器</p></li><li><p>相邻选择器</p></li><li><p>子选择器</p></li><li><p>后代选择器</p></li><li><p>通配符选择器</p></li><li><p>属性选择器</p></li><li><p>伪类选择器</p></li></ol><h3 id="标签上title与alt属性的区别" tabindex="-1"><a class="header-anchor" href="#标签上title与alt属性的区别" aria-hidden="true">#</a> 标签上title与alt属性的区别</h3><p>title：为该属性提供信息</p><p>alt：当图片不显示时，用文字代替</p><h3 id="src-与-href-的区别" tabindex="-1"><a class="header-anchor" href="#src-与-href-的区别" aria-hidden="true">#</a> src 与 href 的区别</h3><p>src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。</p><p>src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。</p><h3 id="让文字在垂直和水平方向上重叠的两个属性" tabindex="-1"><a class="header-anchor" href="#让文字在垂直和水平方向上重叠的两个属性" aria-hidden="true">#</a> 让文字在垂直和水平方向上重叠的两个属性</h3><p>垂直方向：line-height</p><p>水平方向：letter-spacing</p><p>关于 letter-spacing 的妙用知道有哪些么？</p><p>答案:可以用于消除 inline-block 元素间的换行符空格间隙问题。</p><h3 id="display-none-与-visibility-hidden-的区别" tabindex="-1"><a class="header-anchor" href="#display-none-与-visibility-hidden-的区别" aria-hidden="true">#</a> display:none 与 visibility:hidden 的区别</h3><p>display : 隐藏对应的元素但不挤占该元素原来的空间。</p><p>visibility: 隐藏对应的元素并且挤占该元素原来的空间。</p><h3 id="css的盒子模型-低版本ie的盒子模型有什么不同" tabindex="-1"><a class="header-anchor" href="#css的盒子模型-低版本ie的盒子模型有什么不同" aria-hidden="true">#</a> CSS的盒子模型？低版本IE的盒子模型有什么不同</h3><p>（1）有两种， IE 盒子模型、W3C 盒子模型； （2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)； （3）区 别： IE的content部分把 border 和 padding计算了进去;</p><h3 id="bfc-是什么-block-formatting-context" tabindex="-1"><a class="header-anchor" href="#bfc-是什么-block-formatting-context" aria-hidden="true">#</a> BFC 是什么?（Block Formatting Context）</h3><p>BFC（块级格式化上下文），一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。</p><p>在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin 重叠的问题</p><p>BFC 是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用</p><h3 id="css3新特性" tabindex="-1"><a class="header-anchor" href="#css3新特性" aria-hidden="true">#</a> CSS3新特性</h3><p>CSS3实现圆角（border-radius），阴影（box-shadow），</p><p>对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）</p><p>transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜</p><p>增加了更多的CSS选择器 多背景 rgba</p><p>在CSS3中唯一引入的伪元素是 ::selection.</p><p>媒体查询，多栏布局</p><p>border-image</p><h3 id="display的值" tabindex="-1"><a class="header-anchor" href="#display的值" aria-hidden="true">#</a> display的值</h3><p>block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。</p><p>none 缺省值。象行内元素类型一样显示。</p><p>inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。</p><p>inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。</p><p>list-item 象块类型元素一样显示，并添加样式列表标记。</p><p>table 此元素会作为块级表格来显示。</p><p>inherit 规定应该从父元素继承display 属性的值。</p><h3 id="position-的值" tabindex="-1"><a class="header-anchor" href="#position-的值" aria-hidden="true">#</a> position 的值</h3><p>absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。</p><p>fixed： （老 IE 不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。</p><p>relative ：生成相对定位的元素，相对于其正常位置进行定位。</p><p>static ：默认值。没有定位，元素出现在正常的流中</p><ul><li><p>（忽略 top, bottom, left, right z-index 声明）。</p></li><li><p>inherit 规定从父元素继承 position 属性的值。</p></li></ul><h3 id="浏览器标准模式和怪异模式" tabindex="-1"><a class="header-anchor" href="#浏览器标准模式和怪异模式" aria-hidden="true">#</a> 浏览器标准模式和怪异模式</h3><p>1）在严格模式中 ：width是内容宽度 ，元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;</p><p>在怪癖模式中 ：width则是元素的实际宽度 ，内容宽度 = width - ( padding-left + padding-right + border-left-width + border-right-width)</p><p>2）可以设置行内元素的高宽</p><p>在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。</p><p>3）可设置百分比的高度</p><p>在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。</p><p>4）用margin:0 auto设置水平居中在IE下会失效</p><p>使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:</p><p>body{text-align:center};#content{text-align:left}</p><p>5）quirk模式下设置图片的padding会失效</p><p>6）quirk模式下Table中的字体属性不能继承上层的设置</p><p>7）quirk模式下white-space:pre会失效</p><p>8）盒模型解释不同</p><h3 id="一次-js-请求一般情况下有哪些地方会有缓存处理" tabindex="-1"><a class="header-anchor" href="#一次-js-请求一般情况下有哪些地方会有缓存处理" aria-hidden="true">#</a> 一次 js 请求一般情况下有哪些地方会有缓存处理</h3><p>dns 缓存，cdn 缓存，浏览器缓存，服务器缓存。</p><h3 id="为什么利用多个域名来存储网站资源会更有效" tabindex="-1"><a class="header-anchor" href="#为什么利用多个域名来存储网站资源会更有效" aria-hidden="true">#</a> 为什么利用多个域名来存储网站资源会更有效</h3><p>CDN 缓存更方便 突破浏览器并发限制</p><p>节约 cookie 带宽</p><p>节约主域名的连接数，优化页面响应速度</p><p>防止不必要的安全问题</p><h3 id="伪类和伪元素" tabindex="-1"><a class="header-anchor" href="#伪类和伪元素" aria-hidden="true">#</a> 伪类和伪元素</h3><p>CSS伪类：用于向某些选择器添加特殊的效果。</p><p>CSS伪元素：用于将特殊的效果添加到某些选择器。</p><p>伪类</p><table><thead><tr><th>代码</th><th>说明</th></tr></thead><tbody><tr><td>:hover</td><td>将样式添加到鼠标悬浮的元素</td></tr><tr><td>:active</td><td>将样式添加到被激活的元素</td></tr><tr><td>:focus</td><td>将样式添加到获得焦点的元素</td></tr><tr><td>:link</td><td>将样式添加到未被访问过的链接</td></tr></tbody></table><p>伪元素</p><table><thead><tr><th>代码</th><th>说明</th></tr></thead><tbody><tr><td>p:first-of-type</td><td>选择属于其父元素的首个元素的每个元素</td></tr><tr><td>p:last-of-type</td><td>选择属于其父元素的最后元素的每个元素</td></tr><tr><td>p:only-of-type</td><td>选择属于其父元素唯一的元素的每个元素。</td></tr><tr><td>p:only-child</td><td>选择属于其父元素唯一的子元素的每个元素。</td></tr></tbody></table><h3 id="html5布局的方式" tabindex="-1"><a class="header-anchor" href="#html5布局的方式" aria-hidden="true">#</a> html5布局的方式</h3><p>1.浮动</p><p>2.定位</p><p>3.分栏布局</p><p>4.弹性布局</p><p>5.响应式布局</p><h3 id="弹性布局的优点" tabindex="-1"><a class="header-anchor" href="#弹性布局的优点" aria-hidden="true">#</a> 弹性布局的优点</h3><p>1 适应性强，在做不同屏幕分辨率的界面时非常实用</p><p>2 可以随意按照宽度、比例划分元素的宽高</p><p>3 可以轻松改变元素的显示顺序</p><p>4 弹性布局实现快捷，易维护</p><h3 id="content-box和border-box-为什么看起来content-box更合理-但还是经常使用border-box" tabindex="-1"><a class="header-anchor" href="#content-box和border-box-为什么看起来content-box更合理-但还是经常使用border-box" aria-hidden="true">#</a> content-box和border-box，为什么看起来content-box更合理，但还是经常使用border-box</h3><p>content-box是W3C的标准盒模型 元素宽度+padding+border</p><p>border-box 是ie的怪异盒模型，他的元素宽度等于内容宽度 内容宽度包含了padding和border</p><p>比如有时候在元素基础上添加内边距padding或border会将布局撑破 但是使用border-box就可以轻松完成</p><h3 id="实现三个div等分排在一行-考察border-box" tabindex="-1"><a class="header-anchor" href="#实现三个div等分排在一行-考察border-box" aria-hidden="true">#</a> 实现三个DIV等分排在一行（考察border-box)</h3><p>1.设置border-box width 33.33%</p><p>2.flexbox flex:1</p><h3 id="怎么实现一个div左上角到右下角的移动" tabindex="-1"><a class="header-anchor" href="#怎么实现一个div左上角到右下角的移动" aria-hidden="true">#</a> 怎么实现一个DIV左上角到右下角的移动</h3><p>改变left值为window宽度-div宽度 top值为window高度=div高度</p><p>jquery的animate方法</p><p>css3的transition</p><h3 id="rem-和-em的区别" tabindex="-1"><a class="header-anchor" href="#rem-和-em的区别" aria-hidden="true">#</a> rem 和 em的区别</h3><p>em相对于父元素，rem相对于根元素</p><h3 id="渐进增强和优雅降级" tabindex="-1"><a class="header-anchor" href="#渐进增强和优雅降级" aria-hidden="true">#</a> 渐进增强和优雅降级</h3><p>渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。</p><p>优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。</p><h3 id="http和https" tabindex="-1"><a class="header-anchor" href="#http和https" aria-hidden="true">#</a> HTTP和HTTPS</h3><p>HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。</p><p>默认HTTP的端口号为80，HTTPS的端口号为443。</p><h3 id="为什么https安全" tabindex="-1"><a class="header-anchor" href="#为什么https安全" aria-hidden="true">#</a> 为什么HTTPS安全</h3><p>因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS， 密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载， 流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性</p><h3 id="性能优化问题" tabindex="-1"><a class="header-anchor" href="#性能优化问题" aria-hidden="true">#</a> 性能优化问题</h3><p>代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。</p><p>缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等</p><p>请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。</p><p>请求带宽：压缩文件，开启GZIP，</p><h3 id="减少页面加载时间" tabindex="-1"><a class="header-anchor" href="#减少页面加载时间" aria-hidden="true">#</a> 减少页面加载时间</h3><ol><li>优化图片</li><li>图像格式的选择</li><li>优化CSS</li><li>网址后加斜杠</li><li>标明高度和宽度</li><li>减少http请求（合并文件，合并图片）。</li></ol><h3 id="什么是fouc-你如何来避免fouc" tabindex="-1"><a class="header-anchor" href="#什么是fouc-你如何来避免fouc" aria-hidden="true">#</a> 什么是FOUC？你如何来避免FOUC</h3><p>由于css引入使用了@import 或者存在多个style标签以及css文件在页面底部引入使得css文件加载在html之后导致页面闪烁、花屏</p><p>用link加载css文件，放在head标签里面</p><h3 id="代码层面的优化" tabindex="-1"><a class="header-anchor" href="#代码层面的优化" aria-hidden="true">#</a> 代码层面的优化</h3><p>用hash-table来优化查找</p><p>少用全局变量</p><p>用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能</p><p>用setTimeout来避免页面失去响应</p><p>缓存DOM节点查找的结果</p><p>避免使用CSS Expression</p><p>避免全局查询</p><p>避免使用with(with会创建自己的作用域，会增加作用域链长度)</p><p>多个变量声明合并</p><p>避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率</p><p>尽量避免写在HTML标签中写Style属性</p><h3 id="移动端性能优化" tabindex="-1"><a class="header-anchor" href="#移动端性能优化" aria-hidden="true">#</a> 移动端性能优化</h3><p>尽量使用css3动画，开启硬件加速。</p><p>适当使用touch事件代替click事件。</p><p>避免使用css3渐变阴影效果。</p><p>可以用transform: translateZ(0)来开启硬件加速。</p><p>不滥用Float。Float在渲染时计算量比较大，尽量减少使用</p><p>不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。</p><p>合理使用requestAnimationFrame动画代替setTimeout</p><p>CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加</p><p>PC端的在移动端同样适用</p></div></div><footer class="page-meta"><div class="meta-item edit-link"><span class="xicon-container left meta-item-label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M2 26h28v2H2z" fill="currentColor"></path><path d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Edit this page<!--]--></span></span></div><div class="meta-item last-updated"><span class="xicon-container left meta-item-label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Last Updated 2023-04-08 09:19:01<!--]--></span></span></div></footer><!----><!----></main><!--]--><div class="page-catalog-container"><h5 class="tip">文章目录</h5><ul><!--[--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#h5-css3" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="H5+css3"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->H5+css3<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#html5和html的区别" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="html5和html的区别"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->html5和html的区别<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#对语义化标签的理解" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="对语义化标签的理解"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->对语义化标签的理解<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#浏览器的内核" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="浏览器的内核"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->浏览器的内核<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#前端页面有哪三层构成-分别是什么-作用是什么" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="前端页面有哪三层构成，分别是什么？作用是什么"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端页面有哪三层构成，分别是什么？作用是什么<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#doctype作用-严格模式与混杂模式如何区分-它们有何意义" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#你知道多少种doctype文档类型" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="你知道多少种Doctype文档类型"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->你知道多少种Doctype文档类型<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#html与xhtml——二者有什么区别" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="HTML与XHTML——二者有什么区别"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->HTML与XHTML——二者有什么区别<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#输入完网址按下回车-到看到网页这个过程中发生了什么" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="输入完网址按下回车，到看到网页这个过程中发生了什么"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->输入完网址按下回车，到看到网页这个过程中发生了什么<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#网站重构的理解" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="网站重构的理解"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->网站重构的理解<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#优化大图-多图-显示-提高用户体验" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="优化大图（多图）显示，提高用户体验"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->优化大图（多图）显示，提高用户体验<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#iframe的优缺点" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="iframe的优缺点"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->iframe的优缺点<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#请阐述table的缺点" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="请阐述table的缺点"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->请阐述table的缺点<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#行内元素和块级元素有哪些" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="行内元素和块级元素有哪些"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->行内元素和块级元素有哪些<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#行内元素和块级元素的区别" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="行内元素和块级元素的区别"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->行内元素和块级元素的区别<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#清除浮动的方式" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="清除浮动的方式"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->清除浮动的方式<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#引入css样式的方式" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="引入css样式的方式"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->引入css样式的方式<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#link和-import有什么区别" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="link和@import有什么区别"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->link和@import有什么区别<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#css的三大特性" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="css的三大特性"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->css的三大特性<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#css的选择符" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="css的选择符"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->css的选择符<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#标签上title与alt属性的区别" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="标签上title与alt属性的区别"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->标签上title与alt属性的区别<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#src-与-href-的区别" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="src 与 href 的区别"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->src 与 href 的区别<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#让文字在垂直和水平方向上重叠的两个属性" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="让文字在垂直和水平方向上重叠的两个属性"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->让文字在垂直和水平方向上重叠的两个属性<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#display-none-与-visibility-hidden-的区别" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="display:none 与 visibility:hidden 的区别"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->display:none 与 visibility:hidden 的区别<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#css的盒子模型-低版本ie的盒子模型有什么不同" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="CSS的盒子模型？低版本IE的盒子模型有什么不同"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->CSS的盒子模型？低版本IE的盒子模型有什么不同<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#bfc-是什么-block-formatting-context" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="BFC 是什么?（Block Formatting Context）"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->BFC 是什么?（Block Formatting Context）<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#css3新特性" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="CSS3新特性"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->CSS3新特性<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#display的值" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="display的值"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->display的值<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#position-的值" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="position 的值"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->position 的值<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#浏览器标准模式和怪异模式" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="浏览器标准模式和怪异模式"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->浏览器标准模式和怪异模式<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#一次-js-请求一般情况下有哪些地方会有缓存处理" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="一次 js 请求一般情况下有哪些地方会有缓存处理"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->一次 js 请求一般情况下有哪些地方会有缓存处理<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#为什么利用多个域名来存储网站资源会更有效" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="为什么利用多个域名来存储网站资源会更有效"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->为什么利用多个域名来存储网站资源会更有效<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#伪类和伪元素" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="伪类和伪元素"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->伪类和伪元素<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#html5布局的方式" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="html5布局的方式"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->html5布局的方式<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#弹性布局的优点" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="弹性布局的优点"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->弹性布局的优点<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#content-box和border-box-为什么看起来content-box更合理-但还是经常使用border-box" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="content-box和border-box，为什么看起来content-box更合理，但还是经常使用border-box"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->content-box和border-box，为什么看起来content-box更合理，但还是经常使用border-box<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#实现三个div等分排在一行-考察border-box" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="实现三个DIV等分排在一行（考察border-box)"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->实现三个DIV等分排在一行（考察border-box)<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#怎么实现一个div左上角到右下角的移动" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="怎么实现一个DIV左上角到右下角的移动"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->怎么实现一个DIV左上角到右下角的移动<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#rem-和-em的区别" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="rem 和 em的区别"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->rem 和 em的区别<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#渐进增强和优雅降级" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="渐进增强和优雅降级"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->渐进增强和优雅降级<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#http和https" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="HTTP和HTTPS"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->HTTP和HTTPS<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#为什么https安全" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="为什么HTTPS安全"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->为什么HTTPS安全<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#性能优化问题" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="性能优化问题"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->性能优化问题<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#减少页面加载时间" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="减少页面加载时间"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->减少页面加载时间<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#什么是fouc-你如何来避免fouc" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="什么是FOUC？你如何来避免FOUC"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->什么是FOUC？你如何来避免FOUC<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#代码层面的优化" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="代码层面的优化"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->代码层面的优化<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/blogs/qianduan/092101.html#移动端性能优化" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="移动端性能优化"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->移动端性能优化<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--]--></ul></div></div></div></div><!----><!----><!--]--></div>
    <script type="module" src="/wb/assets/app-32a7af8e.js" defer></script>
  </body>
</html>
